<!DOCTYPE html>
<html>
<head>
    <title>canvas的demo</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui" />
    <style type="text/css">
        canvas{border:dashed 2px #CCC}
    </style>
    <script src="http://www.17sucai.com/preview/1/2016-04-03/%E6%9B%B2%E7%BA%BF/js/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function $$(id){
            return document.getElementById(id);
        }
        function pageLoad(){
            var can = $$('can');
            var cans = can.getContext('2d');
            var gnt1 = cans.createLinearGradient(10,10,10,280);
            gnt1.addColorStop(0,'#59e670');//6cb1ff
            gnt1.addColorStop(1,'#32cffc');//a676ff
            cans.fillStyle = gnt1;
            cans.fillRect(10,10,380,280);
        }
    </script>
    <body onload="pageLoad();">
        <canvas id="can" width="400px" height="300px">4</canvas>
    </body>


    <script type="text/javascript">
(function($){
function Sport(config){
	this.init();
}

Sport.prototype = {
//默认边距
	margin:10
	//默认宽度
	,width:0
	//默认高度
	,height:0
	//canvas对象
	,canvas:null
	//ctx 绘图环境
	,ctx:null
};
init:function (){
	this.initWidget();
};
//初始化一个2d绘图环境
initWidget:function(){
var $el = $(this.el);
this.canvas = this.canvas || $el[0];
this.width = this.width || $el[0].width();
this.height = this.height || $el[0].height();
//返回一个用于画布的2D绘图环境
this.ctx = this.canvas.getContext("2d");
};
//初始化矩形
initRect:function(){
//初始化

}
})($)


    </script>
</html>